<template>
    <div class="equipmentOverview">
        <div class="equipment-list">
            <div class="item" v-for="(item, index) in showData" :key="index">
                <div class="left">
                    <div class="num">{{ item.left.num }}{{ item.left.unit }}</div>
                    <div class="name">{{ item.left.name }}</div>
                </div>
                <div class="right">
                    <div :class="['right-item', ClassMap[child.name]]" v-for="(child, childIndex) in item.right">
                        <div class="num">{{ child.num }}{{ child.unit }}</div>
                        <div class="name">{{ child.name }}</div>
                    </div>
                </div>
            </div>
        </div>

        <el-pagination class="page" hide-on-single-page :page-size="changePage.pageSize" :current-page="changePage.currentPage" layout="prev, pager, next" :total="changePage.total" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

const ClassMap = {
    在线数: 'green',
    离线数: 'red',
    开启数: 'green',
    运行数: 'green',
    未开启数: 'red',
    未运行数: 'red',
    紧急告警: 'red',
    一般告警: 'yellow'
}

const props: any = defineProps({
    pageSize: {
        type: Number,
        default: 3
    },
    list: {
        type: Array,
        default: () => [
            {
                left: {
                    num: 4500,
                    name: '安防设备'
                },
                right: [
                    { num: 4499, name: '在线数' },
                    { num: 1, name: '离线数' }
                ]
            },
            {
                left: {
                    num: 4500,
                    name: '消防设备'
                },
                right: [
                    { num: 4499, name: '在线数' },
                    { num: 1, name: '离线数' }
                ]
            },
            {
                left: {
                    num: 4500,
                    name: '电梯'
                },
                right: [
                    { num: 4499, name: '运行数' },
                    { num: 1, name: '未运行数' }
                ]
            },
            {
                left: {
                    num: 4500,
                    name: '空调'
                },
                right: [
                    { num: 4499, name: '运行数' },
                    { num: 1, name: '未运行数' }
                ]
            },
            {
                left: {
                    num: 4500,
                    name: '照明设备'
                },
                right: [
                    { num: 4499, name: '开启数' },
                    { num: 1, name: '未开启数' }
                ]
            }
        ]
    }
})

const changePage = reactive({
    currentPage: 1, //默认当前页面为1
    pageSize: props.pageSize,
    total: props.list.length //总共有多少数据
})
let showData: any = ref([])
//这里是获取当前页数
const handleCurrentChange = (val: number) => {
    changePage.currentPage = val
    // 起始序号
    const startIndex = (val - 1) * changePage.pageSize
    showData.value = props.list.slice(startIndex, startIndex + changePage.pageSize)
}

watch(
    () => props,
    () => {
        handleCurrentChange(1)
    },
    {
        immediate: true,
        deep: true
    }
)
</script>

<style scoped lang="scss">
.equipmentOverview {
    height: 250px;
    width: 500px;
    color: #ffffff;
    .equipment-list {
        display: flex;
        flex-direction: column;
        .item {
            display: flex;
            height: 60px;
            margin-bottom: 10px;
            font-size: 12px;
            .left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 88px;
                margin-right: 5px;
                background: url('@/assets/images/home/安防设备背景.png');
                background-size: 100% 100%;
                .num {
                    color: #009bf1;
                    font-size: 18px;
                    margin-bottom: 5px;
                    font-weight: bolder;
                    font-family: PangMenZhengDao;
                }
            }
            .right {
                display: flex;
                justify-content: space-between;
                flex: 1;
                .right-item {
                    width: 100%;
                    min-width: 60px;
                    border-bottom: 2px solid #fff;
                    margin: 2px 5px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background: rgba(255, 255, 255, 0.1);
                    .num {
                        font-size: 15px;
                        margin-bottom: 10px;
                        font-weight: bold;
                        font-family: PangMenZhengDao;
                    }
                }
                .green {
                    background: rgba(72, 163, 118, 0.1);
                    border-bottom: 2px solid #65eaa2;
                }
                .red {
                    background: rgba(255, 108, 131, 0.1);
                    border-bottom: 2px solid #ff6c83;
                }
                .yellow {
                    background: rgba(173, 132, 10, 0.1);
                    border-bottom: 2px solid #b38709;
                }
            }
        }
    }
}
.page {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    @include hHeight(30);
    @include Padding(0, 10, 0, 10);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.0001) 2.03%, rgba(255, 255, 255, 0.5) 97.33%);

    @include MarginTop(5);
}
::v-deep .el-pager li {
    padding: 0 4px;
    background-color: transparent;
}
::v-deep .el-pagination {
    color: #ffffffaa;
}

::v-deep .el-pagination button:disabled {
    color: #ffffffaa;
    background-color: transparent;
}

::v-deep .el-pager li.btn-quickprev,
.el-pager li.btn-quickprev {
    color: #fff;
}

::v-deep .el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
    color: #ffffffaa;
}

::v-deep .el-pager li {
    @include FontSize(14);
}

::v-deep .el-pager li.active {
    color: #ffffff;
    cursor: default;
}
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev {
    background-color: transparent;
}
</style>
